import React,{Component} from "react";
import Storeheader from "./storeheader"
import Item from "../../components/productlist"

import "./index.css"
import {getShopStore} from "../../api/cation";

class Index extends Component{
	constructor(props){
		super(props);
		this.state = {
            desc:"",
		    content:"",
            imgurl:"",
		    onoff:false,
            list:[]
		}
	}
    
    componentDidMount(){
        let {id} = this.props.match.params;
        getShopStore(id).then(res=>{
            let {list,goodsData:{desc,imgurl}} = res.data;
            this.setState({
                desc,
                imgurl,
                list
            },()=>{
                if(this.state.desc!==""){
                    this.setState({
                       content:this.state.desc.substring(0,40)+"..."
                    })
                }
            })
        })
    }

    toggleMore(){
    	this.setState({
    		onoff:!this.state.onoff,
    		content:this.state.onoff ? this.state.desc.substring(0,40)+"..." : this.state.desc.substring(0)
    	})
    }
    render(){
        let {content,list} = this.state;
		return(
            <div className="shopstore">
                {content!==""?<Storeheader data={this.state} toggleMore={this.toggleMore.bind(this)}/>:null}
                <ul>
                   {list.map(item=><Item data={item} key={item.id}/>)}
                </ul>
            </div>
		)
	}
}

export default Index